<template>
  <div id="quotationIndex">
    <nav-bar fixed title="行情"></nav-bar>
    <makeList
      :makeTab="makeTab"
      :nav1="nav1"
      :nav2="nav1"
      :symbolsArray="symbolsArray"
    />
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { NavBar } from 'vant'

import Tabbar from '@/components/Tabbar.vue'
import makeList from '@/components/makeList.vue'

export default {
  components: {
    Tabbar,
    NavBar,
    makeList
  },
  data() {
    return {
      makeTab: ['自选', 'USDT'], //Tab标题
      nav1: ['名称', '最新价', '涨跌幅'],
      // 币种列表
      symbolsArray: [
        {
          symbol: 'btcusdt',
          title: 'BTC/USDT',
          img: 'https://kmadmin.galaxyventures829.xyz/banner/btc.png'
        },
        {
          symbol: 'ethusdt',
          title: 'ETH/USDT',
          img: 'https://kmadmin.galaxyventures829.xyz/banner/btc.png'
        },
        {
          symbol: 'eosusdt',
          title: 'EOS/USDT',
          img: 'https://kmadmin.galaxyventures829.xyz/banner/btc.png'
        },
        {
          symbol: 'crousdt',
          title: 'CRO/USDT',
          img: 'https://kmadmin.galaxyventures829.xyz/banner/btc.png'
        },
        {
          symbol: 'trxusdt',
          title: 'TRX/USDT',
          img: 'https://kmadmin.galaxyventures829.xyz/banner/btc.png'
        }
      ]
    }
  },
  created() {

  }
}
</script>

<style lang="less" scoped>
#quotationIndex {
  padding: 89px 0 50px;
  height: calc(100vh - 139px);
  overflow: hidden;
  background-color: #f8f8f8;
  /deep/.makeTab {
    z-index: 99;
    position: fixed;
    top: 46px;
    width: 100vw;
    background: #fff;
    height: 43px;
  }
}
</style>
